<template>
  <el-card class="box-card">
    <template v-slot:header>
      <div class="header">
        <span>商品及库存管理</span>
        <span style="float: right">
          <el-button
            type="primary"
            size="small"
            @click="
              () => {
                stockMode = false
                createMode = dialogFormVisible = true
              }
            "
            >新增商品</el-button
          >
        </span>
      </div>
    </template>
    <div class="content">
      <el-table :data="products" ref="productTable" style="width: 100%">
        <el-table-column label="图片" width="150">
          <template v-slot="scope">
            <img :src="scope.row.cover" style="width: 120px" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称" sortable width="250"></el-table-column>
        <el-table-column prop="rate" label="评分" width="80" sortable></el-table-column>
        <el-table-column label="商品简介" sortable>
          <template v-slot="scope">
            <span class="description">{{ pureText(scope.row.description) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="80" sortable></el-table-column>
        <el-table-column label="操作" width="140">
          <template v-slot="scope">
            <div class="operation-slot">
              <el-link type="primary" @click="manageProduct(scope.row)">修改</el-link>
              <el-link type="primary" @click="manageStock(scope.row)">库存</el-link>
              <el-popconfirm
                class="box-item"
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="infoFilled"
                icon-color="red"
                title="确定删除这个商品吗？"
                @confirm="removeProduct(scope.row.id)"
              >
                <template v-slot:reference>
                  <el-link type="danger">删除</el-link>
                </template>
              </el-popconfirm>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="商品信息" v-model="dialogFormVisible">
        <ProductManage
          :product="product"
          :create-mode="createMode"
          v-show="!stockMode"
          @dismiss="dialogFormVisible = false"
          @updated="loadProducts"
        ></ProductManage>
        <StockManage
          :product="product"
          :stock="stock"
          v-show="stockMode"
          @dismiss="dialogFormVisible = false"
        ></StockManage>
      </el-dialog>
    </div>
  </el-card>
</template>

<script setup>
import api from '@/api'
import ProductManage from '@/components/home/warehouse/ProductManage.vue'
import StockManage from '@/components/home/warehouse/StockManage.vue'
import { nextTick, onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cart.js'
import { ElNotification } from 'element-plus'

const cartStore = useCartStore()
const products = ref([])
const product = ref({
  title: '',
  price: 0,
  rate: 0,
  cover: '',
  desc: '',
  description: '',
  specifications: [],
})
const stock = ref({
  amount: 0,
  frozen: 0,
})
const createMode = ref(false)
const stockMode = ref(false)
const dialogFormVisible = ref(false)

onMounted(() => {
  loadProducts()
})

/**
 * 去除HTML标签
 */
function pureText(text) {
  return api.stringUtil.pureText(text)
}
/**
 * 加载全部商品信息
 */
async function loadProducts() {
  dialogFormVisible.value = false
  products.value = (await api.warehouse.getAllProducts()).data
  await nextTick(() => {
  })
}
/**
 * 修改特定商品
 */
function manageProduct(product_item) {
  // 属性都是单层的原始数据，做一次浅拷贝就够用了
  product.value = product_item
  product.value.description = api.stringUtil.transToReturn(product_item.description)
  createMode.value = false
  stockMode.value = false
  dialogFormVisible.value = true
}
/**
 * 调整库存
 */
async function manageStock(product_item) {
  // 每次打开都实时请求一次库存
  let { data } = await api.warehouse.queryStock(product_item.id)
  stock.value = data
  product.value = product_item
  stockMode.value = true
  dialogFormVisible.value = true
}
/**
 *删除选定产品
 */
function removeProduct(id) {
  try {
    api.warehouse.removeProduct(id)
    // 如果购物车上有这个商品，也删除掉
    // 购物车是存储在客户端本地的，如果其他客户端保存了被删除的商品，需要在购物车页面处理，暂时没有做
    cartStore.removeCartItem(id)
    loadProducts()
    ElNotification({ title: '操作成功', message: '商品已删除', type: 'success' })
  } catch (e) {
    ElNotification({ title: '操作失败', message: e.message, type: 'error' })
  }
}
</script>

<style scoped>
.description {
  font-size: 12px;
  color: #999;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.operation-slot {
  display: flex;
  justify-content: space-between;
}

</style>
